<template>
    <div class="login">
        <div class="login-box">
            <div class="login_title">
                <span>管理员登录</span>
            </div>
            <div class="login_fields">
                <div class="login_fields__user">
                    <el-icon color="white"><User /></el-icon>
                    <input
                        class="name-input"
                        v-model="loginForm.username"
                        name="login"
                        placeholder="用户名"
                        maxlength="16"
                        type="text"
                        autocomplete="off"
                    />
                </div>
                <div class="login_fields__password">
                    <el-icon color="white"><Lock /></el-icon>
                    <input
                        v-model="loginForm.password"
                        name="pwd"
                        placeholder="密码"
                        maxlength="16"
                        type="text"
                        autocomplete="off"
                    />
                </div>
                <div class="login_fields__key">
                    <el-icon color="white"><Key /></el-icon>
                    <input
                        name="code"
                        v-model="loginForm.code"
                        placeholder="验证码"
                        maxlength="5"
                        type="text"
                        autocomplete="off"
                    />
                    <div
                        class="validation"
                        style="opacity: 1; right: -5px; top: -3px"
                    >
                        <el-image
                            class="captchaImg"
                            :src="codeImg"
                            @click="getCodeImg"
                        ></el-image>
                    </div>
                </div>
                <div class="login_fields__submit">
                    <input type="button" value="登录" @click="submit" />
                </div>
                <div class="disclaimer">
                    <p>欢迎登陆后台管理系统</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { captcha, login } from '@/api/user';
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { storeToRefs } from "pinia";
import { getInfo } from '@/api/user'
import { nav } from '@/api/menu'
const useUser = useUserStore()
// const { token } = storeToRefs(useUser);

const router = useRouter();
const loginForm = reactive({} as loginFormDto);
const res = reactive({} as IResponseType<captcha>);
loginForm.username = 'admin';
loginForm.password = 123456;

(async function () {
    getCodeImg();
})();

const codeImg = ref('');
async function getCodeImg() {
    res.data = (await captcha()).data;
    codeImg.value = res.data.base64Img;
    loginForm.token = res.data.token;
}

// 登录
function submit(form: loginFormDto) {
  
    login(loginForm).then((res) => {
      console.log('login', res)
      // 将jwt存储到应用store中
      useUser.SET_TOKEN(res.data.token)
      // 存储用户信息
      getUserInfo()
      console.log('存储用户信息', res.data.token )
      ElMessage.success('登陆成功');
      setTimeout(() => {
          router.push('/');
      }, 500);
    }).catch(err => {
      getCodeImg()
      console.log('错误err',err);
    })

    
}

function getUserInfo() {
  getInfo().then(res => {
    useUser.SET_INFO(res.data)
  })
}

</script>

<style lang="scss" scoped>
.login {
    background: url('https://img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png');
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: fixed;
}
.login-box {
    width: 400px;
    height: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border-radius: 0.5em;
    /**模糊的背景 */
    backdrop-filter: blur(5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
    span {
        color: #ffffff;
        display: grid;
        place-items: center;
        margin: 20px 0;
    }
}

.login_fields > div {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 20px 80px;
}

.login_fields .disclaimer,
.login_fields .login_fields__submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 80px;
}

input {
    width: 190px;
    padding: 10px 10px;
    outline: 0;
    border: none;
    background: 0 0;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
input[type='text']:hover,
input[type='password']:hover {
    border-color: rgb(129, 201, 235);
}

input[type='button']:hover {
    border-color: rgb(129, 201, 235);
    color: rgb(129, 201, 235);
}

input[type='button']:active {
    background: rgb(45, 126, 163);
    color: rgb(129, 201, 235);
}

input::placeholder {
    color: rgb(165, 165, 165);
}
.login_fields__key input {
    width: 80px;
}
.validation {
    color: rgb(129, 201, 235);
    margin-left: 5px;
}
.login_fields__submit input {
    width: 120px;
    border: 1px solid#fff;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0);
    color: #fff;
}
.disclaimer {
    color: #fff;
}
</style>